<template>
  <div class="print-container">
    <iframe id="exportPdf_1" width="0" height="0" />
    <div id="picture_print_1">
      <h1 class="report-title">大功率机车运行质量检修报告</h1>
      <div class="info-row" style="margin-left: 0px; display: flex; flex-wrap: wrap; justify-content: flex-start;">
        <div class="info-col" style="margin-left: 0px; flex: 0 0 25%; max-width: 25%;">
          车型：{{ dataTrainType }}
        </div>
        <div class="info-col" style="flex: 0 0 25%; max-width: 25%;">
          车号：{{ dataTrainNumber }}
        </div>
        <div class="info-col" style="flex: 0 0 25%; max-width: 25%;">
          所在端：{{ dataTrainDuan }}
        </div>
        <div class="info-col" style="flex: 0 0 25%; max-width: 25%;">
          报表时间：{{ dataTrainTime }}
        </div>
      </div>
    </div>
    <div id="print-table_1" class="table-container_1" :class="{'printToPdf': isPrintToPdfFlag}">
      <el-table
        :data="tableData"
        border
        style="width: 100%;margin-left: 30px"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :span-method="objectSpanMethod"
      >
        <el-table-column prop="system" label="所属系统" width="150" />
        <el-table-column prop="component" label="检测部件" width="150" />
        <el-table-column prop="fault" label="检测故障" width="200" />
        <el-table-column label="检测情况">
          <el-table-column prop="result" label="检测结果" width="150" />
          <el-table-column prop="standard" label="检测标准" width="600" />
        </el-table-column>
      </el-table>
      <div class="print-button-container">
        <el-button type="primary" icon="el-icon-printer" @click="handlePrint">打印</el-button>
      </div>
    </div></div></template>

<script>
export default {
  data() {
    return {
      redirect: null,
      otherQuery: null,
      isPrintToPdfFlag: false,
      dataTrainType: 'HXD1',
      dataTrainNumber: '1122',
      dataTrainDuan: 'A',
      dataTrainTime: '2024-11-11 16:58:58',
      // 存放所有的表头 一定要与tableData一致
      colFields: [
        'system',
        'component',
        'fault',
        'result',
        'standard'
      ],
      spanArr: [], // 存储合并单元格的开始位置

      tableData: [
        { system: '网络控制系统', component: '输入输出模块', fault: 'DXM11通信故障检查', result: '正常', standard: '机车网络控制系统检测到2S内DXM11生命信号无变化' },
        { system: '网络控制系统', component: '输入输出模块', fault: 'DXM14通信故障检查', result: '正常', standard: '机车网络控制系统检测到2S内DXM12生命信号无变化' },
        { system: '网络控制系统', component: '输入输出模块', fault: 'DXM13通信故障检查', result: '正常', standard: '机车网络控制系统检测到2S内DXM13生命信号无变化' },
        { system: '网络控制系统', component: '输入输出模块', fault: 'DXM13通信故障检查', result: '正常', standard: '机车网络控制系统检测到2S内DXM14生命信号无变化' },
        { system: '网络控制系统', component: '输入输出模块', fault: 'DXM14通信故障检查', result: '正常', standard: '机车网络控制系统检测到2S内DXM15生命信号无变化' }
      ]
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        console.log('clickroute', route)

        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
          console.log('clickroutequery', this.otherQuery)
          console.log('clickroutequeryredirect', this.redirect)
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.getSpanArr()
  },
  methods: {
    /**
     * 调用浏览器的打印方法
     */
    handlePrint() {
      window.print()
    },
    exportpdfwordex_1() {
      // this.trainloading = true
      // console.log('ceshi', 'ceshi22')
      // this.setTableStyle()
      this.setTableStyle()
      // eslint-disable-next-line no-undef
      // console.log('ceshi', 'ceshi11')
      this.setTableStyle()
      const iframe = document.getElementById('exportPdf_1')
      const doc = iframe.contentWindow.document
      // #print-table是自己的外层id
      const tcontent = document.querySelector('#print-table_1 .el-table').innerHTML // 获取table表中数据
      const contentpic = document.getElementById('picture_print_1').innerHTML
      // console.log('tcontent',tcontent)
      //  let tcontent_p='<div><h1 style="text-align: center">深圳14号线列车限界检测报告</h1></div>'+tcontent+'<div><h2 style="text-align: right">检测结果: &nbsp; &nbsp; &nbsp;'+this.detect_result+' &nbsp; &nbsp; &nbsp; </h2><h2 style="text-align: right">部门名称:_____________</h2><h2 style="text-align: right">签字确认:_____________</h2><h2 style="text-align: right">日期时间:_____________</h2></div>'
      const tcontent_p = contentpic + tcontent
      // &nbsp; &nbsp; &nbsp;
      // console.log('tcontent_p',tcontent_p)
      // 将获取到html标签数据赋值给iframe中组件中id中，组件的样式将影响html标签数据
      doc.getElementsByTagName('body')[0].innerHTML = tcontent_p

      iframe.contentWindow.print() // 调取iframe打印，数据过多打印会自动分页
      this.clearTableStyle()
      // this.trainloading = false
    },
    setTableStyle() {
      // table-designer-container是我自己的外层class，换成你自己的！！！！！！！！！！！！！！！
      const tableDomList = document
        .querySelector('.table-container_1')
        .getElementsByTagName('table')
      // console.log('tableDomList',tableDomList)
      // 去除element的覆盖层
      this.isPrintToPdfFlag = true
      const headRightTh_ = tableDomList[0]
        .getElementsByTagName('tr')[0]
        .getElementsByTagName('th')

      // console.log('headRightTh_',headRightTh_)
      headRightTh_[headRightTh_.length - 1].style.borderRight = '1px solid #ABABAB'
      // headRightTh_[headRightTh_.length - 1].style.fontSize = '40px'
      /*
      const headRightTh = tableDomList[0]
        .getElementsByTagName('tr')[1]
        .getElementsByTagName('th')

      //  console.log('headRightTh',headRightTh)
      headRightTh[headRightTh.length - 2].style.borderRight =
        '1px solid #ABABAB'
      // console.log('hello20',1)
      */
      // 遍历两个table
      const tableLength = tableDomList.length
      // console.log('headRightTh_length',tableLength)
      for (let i = 0; i < tableLength; i++) {
        tableDomList[i].setAttribute('border', '1')
        tableDomList[i].style.border = '#ffffff'
        const childTr = tableDomList[i].getElementsByTagName('tr')
        const childTrLength = childTr.length
        // console.log('hello20',2)
        // 第一个table是头部，没有td会报错
        if (i > 0) {
          for (let j = 0; j < childTrLength; j++) {
            const childTd = childTr[j].getElementsByTagName('td')
            const childTdLength = childTd.length
            // 修改最后一个的边框值
            // console.log('childTdLength',childTdLength)
            // console.log('childTd',childTd)
            // console.log('childTd[childTdLength - 1].style)',childTd[childTdLength - 1])
            if (childTdLength > 0 && childTd[childTdLength - 1].style) {
              childTd[childTdLength - 1].style.borderRight =
                '1px solid #ABABAB'
            }
            //  console.log('hello20',20)
            for (let k = 0; k < childTdLength; k++) {
              childTd[k].style.padding = '8px 0' // 改变之后与element高度一致
              childTd[k].style.valign = 'center'
              childTd[k].style.align = 'center'
              childTd[k].style.textAlign = 'center'

              // eslint-disable-next-line eqeqeq
              if (j == childTrLength - 1) {
                childTd[k].style.borderBottom = '1px solid #ABABAB'
              }
            }
          }
        } else {
          // 去除第一个table去除最右侧的空白th
          const childTr = tableDomList[i].getElementsByTagName('tr')
          const childTrLength = childTr.length
          for (let i = 0; i < childTrLength; i++) {
            const lastTh = childTr[i].querySelector('.gutter')
            if (lastTh) {
              lastTh.parentNode.removeChild(lastTh)
            }
          }
        }
      }

      // print-table是我自己的外层id，换成你自己的id
      return document.querySelector('#print-table_1 .el-table').innerHTML
    },
    // todo清除表格样式
    clearTableStyle() {
      // table-designer-container是我自己的外层class，换成你自己的！！！！！！！！！！！！！！！
      // console.log('hello0',0)
      const tableDomList = document
        .querySelector('.table-container_1')
        .getElementsByTagName('table')

      // 去除第一个table表头最右侧的边框
      /*
      const headRightTh = tableDomList[0]
        .getElementsByTagName('tr')[1]
        .getElementsByTagName('th')
      headRightTh[headRightTh.length - 2].style.borderRight = '1px solid #EBEEF5'
      // console.log('hello2',2)
*/
      const headRightTh_ = tableDomList[0]
        .getElementsByTagName('tr')[0]
        .getElementsByTagName('th')
      //  console.log('headRightTh_',headRightTh_)
      //  console.log('hello4',4)
      headRightTh_[headRightTh_.length - 1].style.borderRight = '1px solid #EBEEF5'
      //   console.log('hello5',5)
      headRightTh_[headRightTh_.length - 1].style.fontSize = '15px'
      //   console.log('hello3',3)
      // 去除右侧和最底部的样式
      for (let i = 0; i < tableDomList.length; i++) {
        tableDomList[i].setAttribute('border', '0')
        tableDomList[i].style.border = 'none'
        const childTr = tableDomList[i].getElementsByTagName('tr')
        const childTrLength = childTr.length
        // 第一个table是头部，没有td会报错
        if (i > 0) {
          for (let j = 0; j < childTrLength; j++) {
            const childTd = childTr[j].getElementsByTagName('td')
            const childTdLength = childTd.length
            // 修改最后一个的边框值
            if (childTdLength > 0 && childTd[childTdLength - 1].style) {
              childTd[childTdLength - 1].style.borderRight = 'none'
            }
            for (let k = 0; k < childTdLength; k++) {
              // eslint-disable-next-line eqeqeq
              if (j == childTrLength - 1) {
                childTd[k].style.borderBottom = '1px solid #EBEEF5'
              }
            }
          }
        }
      }
    },

    getSpanArr() {
      for (let i = 0; i < this.tableData.length; i++) {
        const row = i
        // let col = i % this.colCount;
        if (row === 0) {
          // i 表示行 j表示列
          for (let j = 0; j < this.colFields.length; j++) {
            this.spanArr[i * this.colFields.length + j] = {
              rowspan: 1,
              colspan: 1
            }
          }
        } else {
          for (let j = 0; j < this.colFields.length; j++) {
            // 当前和上一次的一样
            // 1. 合并所有列的相同数据单元格
            if (
              this.tableData[row][this.colFields[j]] ===
              this.tableData[row - 1][this.colFields[j]]
            ) {
              const beforeItem = this.spanArr[(row - 1) * this.colFields.length + j]
              this.spanArr[row * this.colFields.length + j] = {
                rowspan: 1 + beforeItem.rowspan, // 合并几行
                colspan: 1 // 合并几列,我这里只是跨行合并,不跨列合并,所以用的1
              }
              beforeItem.rowspan = 0
              beforeItem.colspan = 0
            } else {
              // rowspan 和 colspan 都为1表格此单元格不合并
              this.spanArr[row * this.colFields.length + j] = {
                rowspan: 1,
                colspan: 1
              }
            }
          }
        }
      }
      // 对数据进行倒序
      const stack = []
      for (let i = 0; i < this.colFields.length; i++) {
        for (let j = 0; j < this.tableData.length; j++) {
          // console.log("i=" + i + " j=" + j);
          // i 表示列 j表示行
          if (j === 0) {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i])
            }
          } else {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i])
            } else {
              stack.push(this.spanArr[j * this.colFields.length + i])
              while (stack.length > 0) {
                const pop = stack.pop()
                const len = stack.length
                this.spanArr[(j - len) * this.colFields.length + i] = pop
              }
            }
          }
        }
      }
      // console.log(this.spanArr);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(this.spanArr[rowIndex * this.colFields.length + columnIndex]);
      return this.spanArr[rowIndex * this.colFields.length + columnIndex]
    }
  }

}
</script>

<style scoped>
.report-container {
  padding: 20px;
}

.report-title {
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.info-row {
  margin-bottom: 20px;
}

.info-col {
  text-align: center;
  padding: 10px; /* 增加内边距以改善布局 */
}

/* 表格样式 */
.el-table {
  border: 2px solid #000; /* 设置表格边框为2px的实线，颜色为黑色 */
}

.el-table th,
.el-table td {
  border: 2px solid #000; /* 设置表头和单元格的边框为2px的实线，颜色为黑色 */
  text-align: center;
}

.el-table th > .cell {
  font-weight: bold;
  color: #333;
}

/* 重置Element UI表格的默认边框样式 */
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: transparent;
}

/* 去除表头底部边框 */
.el-table th.gutter,
.el-table td.gutter {
  display: none; /* 隐藏默认的扩展列 */
}

/* 去除表格行底部边框 */
.el-table .el-table__row td {
  border: none;
}

/* 隐藏空数据提示 */
.el-table .el-table__empty-block {
  display: none;
}
.inspection-report {
  padding: 20px;
}
.print-container {
  width: 1000px;
  margin: 0 auto;
}

.print-button-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>
